<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 600px; height: 600px; border: 1px solid #000; position: relative;left: 0; top: 0;bottom: 0;margin: auto;}
        .left,.right{width: 50%; height: 100%; float: left;}
    
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
<script src="echarts.min.js"></script>
<script>
    let $ = document.querySelector.bind(document);
    // let oBox =$('.box')
    let leftNode = $('.left');
    let rightNode = $('.right');

    let datas =[
        {name:"清华大学",value:3000,students:[{name:'男',value:2222},{name:'女',value:1122},{name:'哦',value:3222}]},
        {name:"北京大学",value:4000,students:[{name:'男',value:322},{name:'女',value:1122},{name:'哦',value:3222}]},
        {name:"河南大学",value:1200,students:[{name:'男',value:200},{name:'女',value:200},{name:'哦',value:200}]}
    ]

    let option = {
       title:{
           text:'大学数据'
       },
       series:[
           {name:"数据详情",
            type:'pie',
            radius:"45%",
            data:datas.map(json=>{return{name:json.name,value:json.value}})}
       ]
    }
    let leftCharts = echarts.init(leftNode);
    leftCharts.setOption(option); 

    // 官方事件
    leftCharts.on("mouseover",function(ev){
        let data = null;
        datas.forEach(json=>{
            if(json.name==ev.data.name){
                data = json
            }
        });
    console.log(ev);

     let option = {
         title:{
             text:ev.data.name
         },
         xAxis:[
             {type:"category",
            data:["男","女","哦"]}
         ],
         yAxis:[
             {type:"value",
             data:data.students.map(st=>st.name)
            }
         ],
         series:[
           {name:"数据详情",
            type:'bar',
            radius:"45%",
            data:data.students.map(st=>st.value)}
       ]


     };
     let rightCharts = echarts.init(rightNode); 
     rightCharts.setOption(option); 
    })



//https://blog.csdn.net/qq_42166078/article/details/100984800  
</script>